<template>
  <el-pagination
    align="center"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="params.pagenum"
    :page-sizes="[2, 5, 10, 20]"
    :page-size="params.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'my-pagination',
  props: {
    params: {
      type: Object,
      required: true,
      default: () => ({
        pagesize: 5,
        pagenum: 1,
      }),
    },
    total: {
      type: Number,
      required: true,
      default: () => 10,
    },
  },
  computed: {
    ...mapState('theme', ['theme']),
  },
  methods: {
    handleSizeChange(pageSize) {
      this.$emit('handleSizeChange', pageSize)
    },
    handleCurrentChange(currentPage) {
      this.$emit('handleCurrentChange', currentPage)
    },
  },
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
